<template>
  <div>
    <h2>计算属性</h2>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <hr>
    <div>{{ getName() }}</div>
    <div>{{ getName() }}</div>
    <div>{{ getName() }}</div>

    <hr>
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <input type="text" v-model="fullName">
  </div>
  
</template>

<script>
export default {
  data () {
    return {
      xing:'xiao',
      ming:'haha'
    }
  },
  computed:{
    fullName:{
     get(){
      return this.xing+' '+this.ming
     },
     set(val){
     this.xing = val.split(' ')[0]
      this.ming = val.split(' ')[1]
     }
       
    }
  },
  methods: {
    getName(){
     
      return this.xing+this.ming
    }
  },

}
</script>

<style>

</style>